import {
    AppBar,
    Box,
    Slide,
    ThemeProvider,
    useScrollTrigger,
} from "@mui/material"
import { Bar } from "@widgets/bar"
import { SideBar } from "@widgets/side-bar"
import { BookshelfLogoTypography } from "@features/bookshelf-logo-typography"
import { NotificationsButton } from "@features/notifications-button"
import { SearchButton } from "@features/search-button"
import { UserProfileButton } from "@features/user-profile-button"
import { headerTheme } from "@entities/header/ui/header.theme"

export const Header = () => {
    const trigger = useScrollTrigger()

    return (
        <ThemeProvider theme={headerTheme}>
            <Slide appear={false} direction={"down"} in={!trigger}>
                <AppBar>
                    <Box
                        flexGrow={1}
                        sx={{ display: { xs: "flex", md: "none" } }}
                    >
                        <SideBar />
                    </Box>
                    <Box
                        sx={{
                            flexGrow: { sm: 0, md: 1 },
                            textAlign: { sm: "center", md: "left" },
                        }}
                    >
                        <BookshelfLogoTypography />
                    </Box>
                    <Bar />
                    <Box
                        display={"flex"}
                        justifyContent={"end"}
                        flexGrow={1}
                    >
                        <SearchButton />
                        <NotificationsButton />
                        <UserProfileButton />
                    </Box>
                </AppBar>
            </Slide>
        </ThemeProvider>
    )
}
